<template>
  <!-- 作业轴弹出层 -->
  <m-win v-model:window_open="val.md_ckdao" title="出刀查询">
    <template #content>
      <van-loading vertical v-if="val.loading == true">
        <template #icon>
          <van-icon name="star-o" size="30" />
        </template>
        Loading...
      </van-loading>

      <div class="raid_div" v-else>
        <div class="raid_box" v-for="(item, key) in val.d.daodata">
          <div class="raid_bar">
            <div style="display: flex; gap: 5px; align-items: center">
              <span style="color: #d3dded">{{ val.d.user_name }}</span>
              <span style="color: #3e476c">|</span>
              <n-time
                style="color: #a6b7e7"
                :time="item.log_time"
                unix
                format="MM-dd hh:mm"
              />

              <img v-if="item.fever == 1" class="fever_img" :src="img_fever" />
            </div>
            <div style="color: #d3dded">
              {{ cfg.bossnamelist?.[item.boss_name]?.bname }}
            </div>
          </div>
          <div class="raid_box2">
            <div class="box2_left">
              <div class="avabox">
                <template v-for="item2 in item.icon?.split(',')">
                  <img class="_avatar" :src="cfg.function.ava(item2)" />
                </template>
              </div>

              <svg class="svg_wd" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 50">
                <rect x="10" y="20" width="10" height="30" fill="#43D9FF" />
                <rect x="30" y="10" width="10" height="40" fill="#43D9FF" />
                <rect x="50" y="20" width="10" height="30" fill="#43D9FF" />
                <rect x="70" y="35" width="10" height="15" fill="#43D9FF" />
              </svg>
              <span class="dmg_text">{{ item.damage?.toLocaleString() }}</span>
            </div>

            <div class="boss_img">
              <img
                :src="`${cfg.cdn2}?file=${
                  cfg.bossnamelist?.[item.boss_name]?.icon
                }&h=100`"
              />
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #footer> </template>
  </m-win>
</template>
<style scoped>
.raid_div {
  background-color: #181d25;
  padding: 0.5em;
  border-radius: 0.8em;
  display: flex;
  gap: 10px;
  flex-direction: column;
  container-type: inline-size;
}
.avabox {
  display: flex;
  gap: 0.25em;
  flex-wrap: wrap;
}
._avatar {
  border: solid 1.5px #a18769;
  border-radius: 0.3em;
  width: 45px;
}
.box2_left {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.svg_wd {
  width: 25px;
  height: 15px;
}
.dmg_text {
  text-shadow: 0 0 4px #000000;
  font-weight: 900;
  font-size: 1.3em;
  color: #9ae6e6;
  letter-spacing: 1px;
}
.raid_box {
  background-color: #2a2f43;
  border-radius: 6px;
  overflow: hidden;
}
.fever_img {
  height: 25px;
}
.raid_bar {
  background-color: #323a59;
  padding: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.raid_box2 {
  padding: 0.5em;
  height: 60px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.boss_img {
  background-color: rgb(57, 66, 82);
  width: 175px;
  height: 50px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
@container (max-width: 600px) {
  ._avatar {
    border: solid 1.5px #a18769;
    width: 35px;
  }
  .dmg_text {
    font-size: 1.1em;
  }
  .boss_img {
    width: 150px;
    height: 40px;
  }
  .raid_box2 {
    height: 50px;
  }
}
@container (max-width: 500px) {
  .avabox {
    gap: 0.2em;
  }
  .box2_left {
    gap: 8px;
  }
  ._avatar {
    width: 28px;
  }
  .dmg_text {
    font-size: 1.1em;
  }
  .boss_img {
    width: 65px;
    height: 35px;
  }
  .svg_wd {
    width: 15px;
    display: none;
  }

  .boss_img img {
    height: 70px;
  }
}
@container (max-width: 320px) {
  .avabox {
    gap: 0.125em;
  }
  .box2_left {
    gap: 5px;
  }
  ._avatar {
    width: 27.5px;
  }
  .dmg_text {
    font-size: 0.9em;
  }
  .boss_img {
    width: 50px;
    height: 35px;
  }
  .boss_img img {
    height: 55px;
  }
}

@media (max-width: 428px) {
  ._avatar {
    width: 10vw;
    border: solid 0.4vw #a18769;
  }
  .avabox {
    gap: 0.75vw;
  }
  .raid_box2 {
    padding: 2vw;
  }
  .raid_box2 {
    height: 14vw;
  }
  .dmg_text {
    font-size: 3.3vw;
  }
  .boss_img {
    width: 18vw;
    height: 10.5vw;
  }
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
import { getrole, getbossv2 } from "@/cfg/function.js";
import img_fever from "@/assets/img/battle/fever-on.svg";

export default {
  props: {},
  setup() {
    const set = {
      run: async () => {
        try {
          const back = await cfg.mget({
            url: `${cfg.url2}api/tj`,
            query: {
              type: "get_userdao",
              data: val.data,
            },
          });
          if (back.code == 0) {
            val.d = back.data;
            val.loading = false;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          val.loading = false;
          cfg.alert3({
            message: error.message,
          });
        }
      },
    };
    const val = reactive({
      user: null,
    });
    cfg.ckdao = async (data) => {
      val.data = data;
      val.md_ckdao = true;
      val.loading = true;
      await getrole();
      await getbossv2();
      setTimeout(async () => {
        await set.run();
      }, 300);
    };

    onMounted(async () => {});
    return {
      set,
      img_fever,
      cfg,
      val,
    };
  },
};
</script>
